<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_CSS3D-缩放效果</title>
  <!-- 
  CSS3 的缩放效果（Scaling）是通过  `transform`  属性实现的，用于改变元素的大小。缩放可以是放大（scale up）或缩小（scale down），并且可以在二维或三维空间中进行。
  1. 基本概念
  - 缩放效果：缩放是通过改变元素的宽度和高度来实现的，而不改变其原有的比例。通过设置不同的缩放因子，可以实现放大或缩小效果。

  2. 关键属性
  -  `transform` ：用于应用变换效果的属性，包括缩放、平移、旋转等。
  -  `scaleX()` 、 `scaleY()`  和  `scaleZ()` ：分别用于在 X 轴、Y 轴和 Z 轴上缩放元素。
  -  `scale()` ：可以同时在 X 和 Y 轴上进行缩放。

   示例：
  .box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
      transition: transform 0.5s; /* 添加过渡效果 */
  }

  /* 放大 */
  .box.scale-up {
      transform: scale(1.5); /* 放大 1.5 倍 */
  }

  /* 缩小 */
  .box.scale-down {
      transform: scale(0.5); /* 缩小到 0.5 倍 */
  }
  3. 使用示例

  以下是一个简单的示例，展示如何使用缩放效果：
  <div class="box" id="box">Scale Me</div>
  <button onclick="scaleUp()">Scale Up</button>
  <button onclick="scaleDown()">Scale Down</button>
  function scaleUp() {
      document.getElementById('box').classList.toggle('scale-up');
  }

  function scaleDown() {
      document.getElementById('box').classList.toggle('scale-down');
  }
  4. 注意事项
  - 性能：使用  `transform`  属性进行缩放通常比使用  `width`  和  `height`  属性更高效，因为  `transform`  是 GPU 加速的。
  - 元素中心：缩放效果是以元素的中心点为基准进行的，可能会导致元素位置的变化。

  5. 总结
  CSS3 的缩放效果提供了一种简单的方法来改变元素的大小。通过使用  `transform`  属性的  `scale()` 、 `scaleX()` 、 `scaleY()`  和  `scaleZ()`  函数，可以轻松地实现放大和缩小效果。缩放效果可以用于增强用户体验，创建动态和交互式的网页设计。掌握缩放效果的使用，可以帮助开发者设计出更加生动的用户界面。
  -->
  <style>
    body{
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .scale-x {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: scaleX(1.5);
    }

    .scale-y {
      width: 100px;
      height: 100px;
      background-color: blue;
      transform: scaleY(1.5);
    }

    .scale-z {
      width: 100px;
      height: 100px;
      background-color: green;
      transform: scaleZ(1.5);
    }

    .scale3d {
      width: 100px;
      height: 100px;
      background-color: yellow;
      transform: scale3d(1.5, 1.5, 1.5);
      transform-origin: 0 0;
    }

  </style>
</head>
<body>

  <h2>1. scaleX</h2>
  <div class="scale-x">scale-x</div>

  <h2>2. scaleY</h2>
  <div class="scale-y">scale-y</div>
  
  <h2>3. scaleZ</h2>
  <div class="scale-z">scale-z</div>

  <h2>4. scale3d</h2>
  <div class="scale3d">scale3d</div>

  
</body>
</html>